<template>
	<view class="content">
		<view class="top_tips questionBox">
			因厂家更改商品包装、场地、附配件等不做提前通知，且每位咨询者购买、提问时间等不同。为此，客服给到的回复仅对提问者3天内有效，其他网友仅供参考！给您带来的不便还请谅解！
		</view>
		<view class="innerContent">
			
			<view class="about">
				<view class="aboutLeft fl fs16 C999">
					关于 {{goods_name}} 
				</view>
				<view class="aboutRight fr fs16 C999">
					的 <text class="Cf00">{{questionBoxData.length}}</text> 个问题
				</view>
			</view>
			
			<view @click="toDetail(goodsId,item.consult_id)" v-for="(item,index) in questionBoxData" :key="index" class="questionBox">
				<view class=" C333 fs21">
					<text class="question_red">问</text>{{item.consult_content}}
				</view>
				<view v-if="item.consult_reply" class="line2">
					<text class="answer_blue C666 fs18">答</text>{{item.consult_reply}}
				</view>
				<view class="line3 fs15 C999">
					<text>提问类型：{{item.ct_name}}</text>
					<!-- <text @click="toDetail(goodsId,item.consult_id)" class="fl">全部 {{item.isanonymous}} 个答案</text> -->
					<text class="fr">更新于 {{item.consult_addtime | formaDate('yyyy-mm-dd')}}</text>
				</view>
			</view>
		
			<view class="fs18 Cccc tac" style="margin-top: 76upx;">
				不好意思已经见底啦~
			</view>			
		</view>
		
		<view class="bottom2">
			<view class="uni-list" style="margin-bottom: 20upx;">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">
						请选择提问类型
					</view>
					<view style="margin-top: -30upx;" class="uni-list-cell-db">
						<picker @change="bindPickerChange" :value="index" :range="array">
							<view class="uni-input">{{array[index]}}</view>
						</picker>
					</view>
				</view>
			</view>
			<input maxlength="100" @confirm="addquestion()" @input="questionInput" v-model="questionvalue" placeholder-class="Cccc fs18" class="bottom2Input fl" type="text" placeholder="向商家提问" value="" />
			<view @click="addquestion()" class="fr bottomBtn tac fs21">
				提问
			</view>
		</view>
		
	</view>
</template>


<script>
	export default {
		data() {
			return {
				goods_name:"",
				index:0,
				array: [],
				array2:[],
				consult_type_id:1,
				goodsId:"",
				key:"",
				questionBoxData:[
						
				],
				questionvalue:"",
				goods_commonid:"",
				curpage:1
			}
		},
		onLoad(options) {
			this.goodsId=options.goods_id
			this.getZixunData()
			this.$util.request({
				url: '/mobile/index.php?act=goods&op=consulting_type',
				method: 'get',
				data: {
					
				},
			}).then((res)=> {
				this.array=[]
				this.array2=res.datas
				for(let i in res.datas){
					var aa=res.datas[i].ct_name
					this.array.push(aa)
				}
				console.log(this.array)
			})
			
		},
		onReachBottom(e) {
			if(this.curpage){
				this.consulting_list(true)
			}else{
				uni.showToast({
					title:"到底了哦~~",
					icon:"none"
				})
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index=e.target.value
				this.consult_type_id=this.array2[this.index].ct_id
				
			},
			getZixunData(){
				let that = this;
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=goods_detail',
					method: 'get',
					data: {
						"goods_id":this.goodsId,
					},
				}).then((res)=> {
					this.goods_name=res.datas.goods_info.goods_name
					this.goods_commonid = res.datas.goods_info.goods_commonid
					this.consulting_list()
				})
				
			},
			consulting_list(state){
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=consulting_list',
					method: 'get',
					data: {
						"goods_commonid":this.goods_commonid,
						"curpage":this.curpage,
					},
				}).then((res)=> {
					if(state){
						this.questionBoxData=this.questionBoxData.concat(res.datas.consult_list) 
					}else{
						this.questionBoxData=res.datas.consult_list
					}
					if(res.datas.paged.hasmore){
						this.curpage++;
					}else{
						this.curpage=false;
					}
				})
			},
			addquestion(){
				// var aa={"id":"4","time":"2020-01-01","anwers":["能盖住的"],"anwersLong":"0"};
				// console.log(aa)
				// aa.question=this.questionvalue;
				// if(this.questionvalue.length != 0){
				// 	console.log(this.questionvalue)
				// 	var aa={};
				// 	var myDate = new Date();
				// 	var bb=myDate.getFullYear()+'-'+(myDate.getMonth()+1)+'-'+myDate.getDate();					
				// 	aa.time=bb;
				// 	aa.question=this.questionvalue;
				// 	aa.anwersLong=0
				//     this.questionBoxData.push(aa);
				// 	 this.questionvalue=""
				// }
				let that = this;
				console.log(that.questionvalue);
				if(!that.questionvalue){
						uni.showToast({
							title: '请填写咨询内容',
							icon:"none"
						});
						return false
				}
				
				this.$util.request({
					url: '/mobile/index.php?act=goods&op=save_consult',
					method: 'POST',
					data: {
						"goods_id":this.goodsId,
						"goods_content":that.questionvalue,
						"consult_type_id":that.consult_type_id,
						"hide_name":"0",
						"key":uni.getStorageSync('key')
					},
				}).then(function(res) {
					console.log(res)
					if(res.error_code == 0){
						uni.showToast({
							title:"提问成功"
						})
						that.questionvalue=""
					}
					that.getZixunData()
					//that.questionBoxData=res.datas.consult_list
					
				})
				
			},
			questionInput: function(event) {
				this.questionvalue = event.target.value  
			},  
			toDome(){
				uni.navigateBack({
					delta:1
				})
			},
			toDetail(id,consult_id){
				// uni.navigateTo({
				    // url: 'zixun_xq?goods_id='+id+'&consult_id='+consult_id
				// });
			}
			
		}
	}
</script>

<style>
	.topBar{
		height: var(--status-bar-height);
		width: 100%; 
		background-color: #FFFFFF;
	}
	
	view{
		box-sizing: border-box;
	}
	.content{
		background-color: #FFFFFF;
	}
	.lh20{
		line-height: 20upx;
		height: 20upx;
	}
	.lh25{
		line-height: 25upx;
	}
	.lh30{
		line-height: 30upx;
	}
	.lh35{
		line-height: 35upx;
	}
	.lh40{
		line-height: 40upx;
	}
	.lh45{
		line-height: 45upx;
	}
	.lh50{
		line-height: 50upx;
	}
	.Cccc{
		color: #CCCCCC;
	}
	.C000{
		color: #000000;
	}
	.Cbf0250{
		color: #BF0250;
	}
	.Cc06{
		color: #cc0066;
	}
	.mt55mb30{
		margin-top: 55upx;
		margin-bottom: 30upx;
	}
	.Cfff{
		color: #FFFFFF;
	}
	.Cbf0250{
		color: #bf0250;
	}
	
	.flex{		
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: space-between;
	}
	.paddingL20{
		padding-left: 20upx;
	}
	.C999{
		color:#999 ;
	}
	.Cff0101{
		color:#ff0101 ;
	}
	.Cc00251{
		color: #c00251;
	}
	.strick{
		text-decoration: line-through;
	}
	.Cbf0250{
		color: #bf0250;
	}
	.hide{
		display: none;
	}
	.marginB20{
		margin-bottom: 20upx;
	}
	
	.twoline{
	   overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.pl20{
		padding-left: 20upx;
	}
	.positionT{
		position: relative;
		top: 50upx;
	}
	.paddingB15{
		padding-bottom: 15upx;
	}
	.borderB{
		border-bottom: 1px solid #f4f4f6;
	}
	.borderT{
		border-top: 1px solid #f4f4f6;
	}
	.gl{
		position: absolute;
		right: 30upx;
	}
	.pr30{
		padding-right: 30upx;
	}
	.C333{
		color: #333333;
	}
	.C666{
		color: #666666;
	}
	.Cf00{
		color: #ff0000;
	}
	
	.bold{
		font-weight: bold;
	}
	.C1d1d1d{
		color:#1d1d1d ;
	}
	.fl{
		float: left;
	}
	.fr{
		float: right;
	}
	.tac{
		text-align: center;
	}
	.Ce5258e{
		color: #e5258e;
	}
	uni-page-body {
		background-color: #FFFFFF;
		color: rgb(102, 102, 102);
	}
	
	.topTitle{
		background-color: #FFFFFF;
		padding-top: 20upx;
		padding-left: 20upx;
		padding-right: 40upx;
	}
	.innerContent{
		background-color: #f4f4f4;
		padding: 0 20upx;
		min-height: 90vh;
	}
	.about{
		box-sizing: border-box;
		height: 77upx;
		line-height: 77upx;
		padding:0 90upx;		
	}
	.aboutLeft{
		height: 77upx;
		line-height: 77upx;
		width: 380upx;
		overflow: hidden;
		text-overflow:ellipsis;
		white-space: nowrap;
		
	}
	.aboutRight{
		height: 77upx;
		line-height: 77upx;
	}
	.questionBox{
		width: 710upx;
		border-radius: 8upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
		padding: 25upx 40upx;
	}
	.question_red{
		border-radius: 6upx;
		position: relative;
		top: 2upx;
		display: inline-block;
		width: 35upx;
		height: 35upx;
		line-height: 35upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 31upx;
		background-color: #ff4300;
		margin-right: 10upx;
	}
	.answer_blue{
		border-radius: 6upx;
		position: relative;
		top: 2upx;
		display: inline-block;
		width: 35upx;
		height: 35upx;
		line-height: 35upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 31upx;
		background-color:#7ecef4 ;
		margin-right: 10upx;
	}
	.line1{
		height: 57upx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.line3{
		padding-top: 10upx;
	}
	.bottom2{
		padding: 23upx 20upx;
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		/* height: 106upx; */
		height: 160upx;
		line-height: 106upx;
		background-color: #fff;
	}
	.bottom2Input{
		box-sizing: border-box;
		width: 530upx;
		height: 60upx;
		background-color: #EEEEEE;
		border-radius: 30upx;
		padding-left: 30upx;
		padding-right: 30upx;
		font-size: 33upx;
		color: #333;
	}
	.bottomBtn{
		width: 140upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 30upx;
		color: #FFFFFF;
		background-color: #ff4300;
	}
	.top_tips{
		width: 100%;
		font-size: 24rpx;
		padding: 25upx 40upx 0px 40upx;
	}
</style>
